<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2-1-1-css栅格</title>
	<link rel="stylesheet" href="./lib/lib/css/bootstrap.min.css">
<style>
	.row{
		margin-bottom: 10px;
	}
	.row .row{
		margin-top: 10px;
		margin-bottom: 0;
	}
	
	[class*='col-']{
		padding-top: 15px;
		padding-bottom: 15px;
		background-color: #eee;
		background-color: rgba(86,61,124,.15);
		border:1px solid #ddd;
		border:1px solid rgba(86,61,124,.2)
	}



</style>
</head>
<body>

<h3>
	<li>.container-fluid:百分比最宽，达到最大范围，占据属于他的整个容器</li>
	<li>container:padding左右 15px;margin左右:auto</li>
	<li>行的使用需要用 row 这个类的div来囊括它，然后再写内容</li>
	<li>使用规范为： .row ===> .col- ===>  自定义内容</li>
</h3>

	<div class="container">
		<div class="row">
			<!-- 一行最多只能承载12个 宽度的最大范围为它上一级父级容器的宽度-->
			<!-- md为小型显示器的970px宽度， 1170px大型显示器为lg -->
			<!-- 移动端为<768px的xs，且像素auto， sm为tablets(ipad) -->
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div>
			<div class="col-md-1">abc</div><!-- 第13个 -->
			<div class="col-md-1">abc</div><!-- 第14个 -->
		</div>

		<div class="row">
			<!-- col-md-{占一行的多少格子},3格子为4个时占满最多承载12格的一行（三四一十二） -->
			<!-- 当内容过多则会调整高度， -->
			<div class="col-md-3">abc</div>
			<div class="col-md-3">abc</div>
			<div class="col-md-3">abc</div>
			<div class="col-md-3">abc</div>
		</div>
		
		<div class="row">
			<div class="col-md-4 col-md-offset-4">偏移，偏移的每个单位为1个格子</div>
		</div>
		
		<div class="row">
			<div class="col-sm-9">行内嵌套
				<div class="row">
					<div class="col-xs-8">
						这是嵌套内容1
					</div>

					<div class="col-xs-4">
						这是嵌套内容1
					</div>
				</div>
			</div>
		</div>
		
		<!-- 列的排序，可以将两行顺序调换 -->
		<div class="row">
			<div class="col-md-9">原版：col-md-9</div>
			<div class="col-md-3">原版：col-md-3</div>
		</div>

		<div class="row">
			<div class="col-md-9 col-md-push-3">排序版：col-md-9</div>
			<div class="col-md-3 col-md-pull-9">排序版：col-md-3</div>
		</div>



	</div>

	
</body>
</html>